<template>
  <div class="app-container">
    <div class="top-title">
      <el-radio-group v-model="selectRadio">
        <el-radio-button label="0">全部资源</el-radio-button>
        <el-radio-button label="1">我的资源</el-radio-button>
        <el-radio-button label="2">下属资源</el-radio-button>
      </el-radio-group>
    </div>
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
      <el-form-item label="经销商姓名" style="margin-right: 40px">
        <el-input />
      </el-form-item>
      <el-form-item label="手机号" style="margin-right: 40px">
        <el-input />
      </el-form-item>
      <el-form-item label="资源来源" style="margin-right: 40px">
        <el-select
          v-model="queryParams.businessType"
          placeholder="资源来源"
          clearable
          style="width: 240px"
        >
          <el-option
            v-for="dict in dict.type.source_of_resources"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="资源阶段" style="margin-right: 40px">
        <el-select>
          <el-option />
        </el-select>
      </el-form-item>
      <el-form-item label="合作意向" style="margin-right: 40px">
        <el-select>
          <el-option />
        </el-select>
      </el-form-item>
      <el-form-item label="归属人员" style="margin-right: 40px">
        <el-input />
      </el-form-item>
      <el-form-item label="归属战队" style="margin-right: 40px">
        <el-select>
          <el-option />
        </el-select>
      </el-form-item>
      <el-form-item style="margin-right: 40px">
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <div class="button-table">
      <el-button
        type="primary"
        size="mini"
        class="button-item"
        @click="addResourceMe"
        >新增资源</el-button
      >
      <el-button size="mini" 
      @click="handleImport"
        >导入</el-button
      >
      <el-button size="mini">导出</el-button>
    </div>
    <el-table :data="tableData">
      <el-table-column prop="date" label="经销商姓名" fixed :align="tableAlign">
      </el-table-column>
      <el-table-column prop="name" label="角色/职务" fixed :align="tableAlign">
      </el-table-column>
      <el-table-column prop="name" label="手机号" fixed :align="tableAlign">
      </el-table-column>
      <el-table-column prop="name" label="所属行业" :align="tableAlign">
      </el-table-column>
      <el-table-column prop="name" label="合作意向" :align="tableAlign">
      </el-table-column>
      <el-table-column prop="name" label="资源来源" :align="tableAlign">
      </el-table-column>
      <el-table-column prop="name" label="资源阶段" :align="tableAlign">
      </el-table-column>
      <el-table-column prop="name" label="归属人员" :align="tableAlign">
      </el-table-column>
      <el-table-column prop="name" label="归属战队" :align="tableAlign">
      </el-table-column>
      <el-table-column prop="name" label="备注" :align="tableAlign">
      </el-table-column>
      <el-table-column prop="name" label="创建时间" :align="tableAlign">
      </el-table-column>
      <el-table-column
        prop="name"
        label="操作"
        fixed="right"
        width="280"
        :align="tableAlign"
      >
        <template slot-scope="scope">
          <el-button type="text" @click="toDetail">详情</el-button>
          <el-button type="text" @click="delItem">删除</el-button>
          <el-button type="text">编辑</el-button>
          <el-button type="text" @click="transCus">转客户</el-button>
          <el-button type="text" @click="releaseItem">释放</el-button>
          <el-button type="text" @click="transferItem">移交</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <el-dialog
      title="移交"
      :visible.sync="transferVisible"
      width="600px"
      append-to-body
    >
      <el-form :model="innerForm" style="margin: 20px auto; width: 360px">
        <el-form-item label="接收人员" label-width="100px">
          <el-cascader
            v-model="innerForm.region"
            :options="options"
            @change="handleChange"
            filterable
            :show-all-levels="false"
          ></el-cascader>
        </el-form-item>
      </el-form>
      <div style="margin: 20px auto 0; width: 400px; text-align: center">
        移交后归属人自动变更为接收人，是否确认移交
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="transferVisible = false">取 消</el-button>
        <el-button type="primary" @click="sumbitTransferItem">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="新增资源"
      :visible.sync="addChangeVisible"
      width="700px"
      append-to-body
    >
      <add @closeDia="closeResourceMe"></add>
    </el-dialog>
    
    <!-- 用户导入对话框 -->
    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
      <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <div class="el-upload__tip" slot="tip">
            <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的资源数据
          </div>
          <span>仅允许导入xls、xlsx格式文件。</span>
          <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板</el-link>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import add from "./add.vue";
import { getToken } from "@/utils/auth"
export default {
  dicts: ['source_of_resources'],
  components: {
    add,
  },
  data() {
    return {
      // 用户导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/system/user/importData",
      },
      addChangeVisible: false,
      options: [
        {
          value: "zhinan",
          label: "指南",
          children: [
            {
              value: "shejiyuanze",
              label: "设计原则",
              children: [
                {
                  value: "yizhi",
                  label: "一致",
                },
                {
                  value: "fankui",
                  label: "反馈",
                },
                {
                  value: "xiaolv",
                  label: "效率",
                },
                {
                  value: "kekong",
                  label: "可控",
                },
              ],
            },
            {
              value: "daohang",
              label: "导航",
              children: [
                {
                  value: "cexiangdaohang",
                  label: "侧向导航",
                },
                {
                  value: "dingbudaohang",
                  label: "顶部导航",
                },
              ],
            },
          ],
        },
        {
          value: "zujian",
          label: "组件",
          children: [
            {
              value: "basic",
              label: "Basic",
              children: [
                {
                  value: "layout",
                  label: "Layout 布局",
                },
                {
                  value: "color",
                  label: "Color 色彩",
                },
                {
                  value: "typography",
                  label: "Typography 字体",
                },
                {
                  value: "icon",
                  label: "Icon 图标",
                },
                {
                  value: "button",
                  label: "Button 按钮",
                },
              ],
            },
            {
              value: "form",
              label: "Form",
              children: [
                {
                  value: "radio",
                  label: "Radio 单选框",
                },
                {
                  value: "checkbox",
                  label: "Checkbox 多选框",
                },
                {
                  value: "input",
                  label: "Input 输入框",
                },
                {
                  value: "input-number",
                  label: "InputNumber 计数器",
                },
                {
                  value: "select",
                  label: "Select 选择器",
                },
                {
                  value: "cascader",
                  label: "Cascader 级联选择器",
                },
                {
                  value: "switch",
                  label: "Switch 开关",
                },
                {
                  value: "slider",
                  label: "Slider 滑块",
                },
                {
                  value: "time-picker",
                  label: "TimePicker 时间选择器",
                },
                {
                  value: "date-picker",
                  label: "DatePicker 日期选择器",
                },
                {
                  value: "datetime-picker",
                  label: "DateTimePicker 日期时间选择器",
                },
                {
                  value: "upload",
                  label: "Upload 上传",
                },
                {
                  value: "rate",
                  label: "Rate 评分",
                },
                {
                  value: "form",
                  label: "Form 表单",
                },
              ],
            },
            {
              value: "data",
              label: "Data",
              children: [
                {
                  value: "table",
                  label: "Table 表格",
                },
                {
                  value: "tag",
                  label: "Tag 标签",
                },
                {
                  value: "progress",
                  label: "Progress 进度条",
                },
                {
                  value: "tree",
                  label: "Tree 树形控件",
                },
                {
                  value: "pagination",
                  label: "Pagination 分页",
                },
                {
                  value: "badge",
                  label: "Badge 标记",
                },
              ],
            },
            {
              value: "notice",
              label: "Notice",
              children: [
                {
                  value: "alert",
                  label: "Alert 警告",
                },
                {
                  value: "loading",
                  label: "Loading 加载",
                },
                {
                  value: "message",
                  label: "Message 消息提示",
                },
                {
                  value: "message-box",
                  label: "MessageBox 弹框",
                },
                {
                  value: "notification",
                  label: "Notification 通知",
                },
              ],
            },
            {
              value: "navigation",
              label: "Navigation",
              children: [
                {
                  value: "menu",
                  label: "NavMenu 导航菜单",
                },
                {
                  value: "tabs",
                  label: "Tabs 标签页",
                },
                {
                  value: "breadcrumb",
                  label: "Breadcrumb 面包屑",
                },
                {
                  value: "dropdown",
                  label: "Dropdown 下拉菜单",
                },
                {
                  value: "steps",
                  label: "Steps 步骤条",
                },
              ],
            },
            {
              value: "others",
              label: "Others",
              children: [
                {
                  value: "dialog",
                  label: "Dialog 对话框",
                },
                {
                  value: "tooltip",
                  label: "Tooltip 文字提示",
                },
                {
                  value: "popover",
                  label: "Popover 弹出框",
                },
                {
                  value: "card",
                  label: "Card 卡片",
                },
                {
                  value: "carousel",
                  label: "Carousel 走马灯",
                },
                {
                  value: "collapse",
                  label: "Collapse 折叠面板",
                },
              ],
            },
          ],
        },
        {
          value: "ziyuan",
          label: "资源",
          children: [
            {
              value: "axure",
              label: "Axure Components",
            },
            {
              value: "sketch",
              label: "Sketch Templates",
            },
            {
              value: "jiaohu",
              label: "组件交互文档",
            },
          ],
        },
      ],
      tableAlign: "center",
      transferVisible: false,
      innerForm: {
        region: "",
      },
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
      ],
      selectRadio: "1",
      queryParams: {
        pageNum: 1,
        pageSize: 20,
      },
    };
  },
  methods: {
    transCus(){
      this.$router.push({
        path:'/project/add'
      })
    },
    handleImport() {
      this.upload.title = "资源导入"
      this.upload.open = true
    },
    closeResourceMe() {
      this.addChangeVisible = false;
    },
    addResourceMe() {
      this.addChangeVisible = true;
    },
    toDetail() {
      this.$router.push({ path: "/resource/detail" });
    },
    sumbitTransferItem() {
      this.transferVisible = false;
    },
    transferItem() {
      this.transferVisible = true;
    },
    delItem() {
      this.$confirm("删除后将无法找回，是否确认删除？", "删除", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    releaseItem() {
      this.$confirm("释放后资源进入公共资源池，是否确认释放？", "释放", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "释放成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消释放",
          });
        });
    },
    getList() {},
    handleQuery() {},
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.pageNum = 1;
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  .top-title {
    margin-bottom: 20px;
  }

  .button-table {
    margin-bottom: 20px;
    display: flex;
    width: 100%;
    justify-content: flex-end;
  }
}
</style>
